<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
    <link rel="stylesheet" href="./css/rejester.css">
</head>
<body>
    <div class="header">
        <div class="header_cen ">
            <div class="hl fl">
                <span class="og">亲,请登录</span>
                <a href="#"><span>免费注册</span></a>
                <a href="#"><span>手机逛淘宝</span></a>
            </div>
            <div class="hr fr">
                <a href=""><span>淘宝网首页</span></a>
                <a href=""><span>我的淘宝</span></a>
                <a href=""><span>购物车</span></a>
                <a href=""><span>收藏夹</span></a>
                <a href=""><span>商品分类</span></a>
                <a href=""><span>卖家中心</span></a>
                <a href=""><span>联系客服</span></a>
                <a href=""><span>网站导航</span></a>
            </div>
        </div>

        <div class="page">
            <div class="pageon">
                <div class="users">
                    <a><img src="./img/T1Kz0pXzJdXXXIdnjb-146-58.png" alt=""></a>
                    <h2>用户注册</h2>
                </div>
            </div>
        </div>


        <div class="ting">
            <div class="Sign">
                <div class="number">
                    <label class="label">帐号</label>
                    <div class="midd">
                        <div class="line">
                            <div class="inp">
                                <!-- <div class="select">
                                    <div class="code">
                                        <span class="name">
                                            中国大陆
                                        </span>
                                        <div class="arce">
                                            +86
                                            <div class="arrow"></div>
                                        </div>
                                    </div>
                                  
                                    <div class="list">
                                        <ul id="itemw" class="ggg">
                                            <li>中国大陆</li>
                                            <li>+86</li>
                                        </ul>
                                        <ul id="itemq" class="ggg">
                                            <li>中国香港</li>
                                            <li>+852</li>
                                        </ul>
                                        <ul id="itemq">
                                            <li>中国澳门</li>
                                            <li>+853</li>
                                        </ul>
                                        <ul id="itemq" class="ggg">
                                            <li>中国台湾</li>
                                            <li>+886</li>
                                        </ul>
                                        <ul id="itemq" class="ggg">
                                            <li>韩国</li>
                                            <li>+82</li>
                                        </ul>
                                        <ul id="itemq" class="ggg">
                                            <li>日本</li>
                                            <li>+81</li>
                                        </ul>
                                        <ul id="itemq" class="ggg">
                                            <li>美国</li>
                                            <li>+1</li>
                                        </ul>
                                    </div>

                                </div> -->
                            </div>
                            <div class="control">
                                <input placeholder="请输入你的账号" type="tel" value="" id="username">
                            </div>

                        </div>
                    </div>
                </div>

                <!-- 密码 -->
                <div class="number">
                    <label class="label">密码</label>
                    <div class="midd">
                        <div class="line">
                            <div class="contro">
                                <input type="text " placeholder="请输入密码" id="password">
                            </div>
                            <!-- <div class="extra">
                                <a href="">获取验证码</a>
                            </div> -->
                        </div>
                    </div>
                </div>

                <!-- 登录 -->
                <a href="./login.html" role="button" class="btnping">
                    <span id="btn2">注册</span>
                </a>

                <!-- 协议 -->
                <div class="agr">
                    <input type="checkbox" id="agring">
                    <label for="" class="agrment">
                        <div>
                            <p>
                                已阅读并同意一下协议
                                <a href="" target="_blank">淘宝平台服务协议</a>，
                                <a href="" target="_blank">隐私权政策</a>，
                                <a href="" target="_blank">法律声明</a>，
                                <a href="" target="_blank">支付宝及客户端服务协议</a>，
                            </p>
                        </div>
                    </label>
                </div>
            </div>
        </div>



        <div class="footer">
            <ul>
                <li><a href="#">阿里巴巴集团</a></li>
                <li><a href="#">阿里巴巴国际站</a></li>
                <li><a href="#">阿里巴巴中国站</a></li>
                <li><a href="#">全球速卖通</a></li>
                <li><a href="#">淘宝网</a></li>
                <li><a href="#">天猫</a></li>
                <li><a href="#">聚划算</a></li>
                <li><a href="#">一淘</a></li>
                <li><a href="#">阿里妈妈</a></li>
                <li><a href="#">飞猪</a></li>
                <li><a href="#">虾米</a></li>
                <li><a href="#">阿里云计算</a></li>
                <li><a href="#">云OS</a></li>
                <li><a href="#">万网</a></li>
                <li><a href="#">支付宝</a></li>

            </ul>
        </div>
        <div class="last">
            <ul>
                <li><a href="#">关于淘宝</a></li>
                <li><a href="#">合作伙伴</a></li>
                <li><a href="#">营销中心</a></li>
                <li><a href="#">联系客服</a></li>
                <li><a href="#">开放平台</a></li>
                <li><a href="#">诚征英才</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">网站地图</a></li>
                <li><a href="#">法律声明及隐私权政策</a></li>
                <span>© 2022-现在 Taobao.com 版权所有</span>
                <span>网络文化经营许可证<a href="">文网文[2010]040号</a></span>
                <span>增值电信业务经营许可证：浙B2-20080224-1</span>
                <span>信息网络传播视听节目许可证：1109364号</span>
            </ul>
        </div>
</body>
<script>
    
    const oun = document.getElementById("username")
    const opw = document.getElementById("password")
  
    const ob2 = document.getElementById("btn2")
 
    ob2.onclick = function(){
        // 发起登录请求，携带数据
        ajax2Post({
            type:"post",
            url: "http://localhost:3000/register",
            data:{
                username: oun.value,
                password: opw.value
            },
            success:res=>{
                console.log(res);
            },
            error:code=>{
                console.log(code);
            }
        })
    }

    function ajax2Post(ops = {}){
        let {type="get", success, error, data={}, url} = ops;
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }
        // 2. post的数据不在url身上拼接
        // url += "?" + str.slice(0,-1);
        const xhr = new XMLHttpRequest();
        // 1. 注意open的第一个参数为post
        xhr.open(type, url, true);
        xhr.onreadystatechange = function(){
            console.log(xhr.status);
            if(xhr.readyState === 4 && xhr.status === 200){
                success(xhr.responseText);
            }else if(xhr.readyState === 4 && xhr.status !== 200){
                error && error(xhr.status);
            }
        }
        // 3. 修改请求头对象中的Content-type
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // 4. post的数据交给send的参数
        xhr.send(str.slice(0,-1));
    }

</script>
</html>